<template>
  <div>
    <el-row :gutter="24" style="margin-top: 80px">
      <el-col :offset="1" :span="5" style="margin-bottom: 40px">
        <el-input v-model="buildform.name" placeholder="服务名" style="width: 200px"></el-input>
        <el-button type="primary" @click="flush">搜索</el-button>
      </el-col>
      <el-col  :span="5" style="margin-bottom: 40px">
        <el-input  v-model="buildform.item" placeholder="项目" style="width: 200px"></el-input>
        <el-button type="primary" @click="flush">搜索</el-button>
      </el-col>
      <el-col  :span="5" style="margin-bottom: 40px">
        <el-select v-model="buildform.status" style="width: 200px"  placeholder="构建方式">
          <el-option  label=" 全部" :value="0"></el-option>
          <el-option  label="后端服务" :value="1"></el-option>
          <el-option  label="分支合并" :value="2"></el-option>
          <el-option  label="前端服务" :value="3"></el-option>
        </el-select>
        <el-button type="primary" @click="flush">搜索</el-button>
      </el-col>
      <el-col :offset="4" :span="4"  style="margin-bottom: 50px">
        <el-button @click="buildapply = true" type="success" round> 发起构建</el-button>
        <el-dialog title="构建申请" :visible.sync="buildapply" :close-on-click-modal="false" style="width: 850px;left: 18%"  >
          <el-form v-model="buildform"  class="demo-ruleForm" style="text-align: right">
            <el-form-item label="项目">
              <el-input style="width:300px" type="text" v-model="applyform.item"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务名">
              <el-input style="width:300px" type="text" v-model="applyform.name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分支">
              <el-input style="width:300px" type="text" v-model="applyform.branche"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="构建方式">
              <el-select v-model="applyform.status" style="width: 300px">
                <el-option  label="后端服务" :value="1"></el-option>
                <el-option  label="分支合并" :value="2"></el-option>
                <el-option  label="前端服务" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeForm">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :offset="1" :span="22" style="text-align: center">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="服务名" width="160"></el-table-column>
          <el-table-column prop="status" label="构建类型" width="120"></el-table-column>
          <el-table-column prop="item" label="项目" width="280"></el-table-column>
          <el-table-column prop="branche" label="构建分支" width="260"></el-table-column>
          <el-table-column prop="giturl" label="GitUrl" width="220"></el-table-column>
          <el-table-column prop="time" label="构建时间" width="180">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <a href="#" style="text-decoration: none;color: #4e82ff" @click="handleClick(scope.$index, scope.row)">再次构建</a>
              <a href="#"  style="text-decoration: none;color: #4e82ff" @click="handleClick2(scope.$index, scope.row)">构建情况</a>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :offset="1" style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=buildform.page
          :page-sizes="[10, 20, 40]"
          :page-size="buildform.row"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
      </el-col>
    </el-row>

  </div>

</template>

<style></style>

<script>

    export default {
        data() {
            return {
              ServerName:'',
              tableData: [],
              buildapply:false,
              buildform:{
                name:'',
                branche:'',
                status:'',
                item:'',
                page: 1,
                row: 10,
              },
              applyform:{
                name:'',
                branche:'',
                status:'',
                item:'',
              },
              total:10,
            }
        },
    methods:{
      handleSizeChange: function (size) {
        this.buildform.row = size;
        this.flush();
      },
      handleCurrentChange: function(currentPage){
        this.buildform.page = currentPage;
        this.flush();
      },
        closeForm:function () {
          this.buildform.page ='';
          this.buildapply=false;
        },
        submit:function () {
          if (this.applyform.status==''){
            this.$alert("选择构建方式",{
              center: true
            })
          }else {
            this.$axios.post("/tool/buildApply",this.applyform).then(Response=>{
              this.closeForm();
                this.$notify({
                message:Response.data,
                duration: 1000
              })
            })
          }
        },
      flush:function () {
        this.$axios.post("/tool/applyList",this.buildform).then(Response => {
          var data = [];
          this.total = Response.data.count;
          console.log(this.total)
          for (let i = 0; i < Response.data.list.length; i++) {
            var obj = {};
            obj.name = Response.data.list[i].name;
            obj.branche = Response.data.list[i].branche;
            obj.time = Response.data.list[i].time;
            obj.id = Response.data.list[i].id;
            obj.item = Response.data.list[i].item;
            obj.giturl = Response.data.list[i].giturl;
            if (Response.data.list[i].status =='1'){
              obj.status = "后端服务";
            } else if(Response.data.list[i].status =='2'){
              obj.status = "分支合并";
            } else{
              obj.status = "前端服务";
            }
            data[i] = obj;
          }
          this.tableData = data;
        })
      },
      handleClick:function (index, row) {
        console.log(row);
        this.applyform.branche = row.branche;
        this.applyform.item = row.item;
        this.applyform.name = row.name;
        if (row.status =='后端服务'){
          this.applyform.status = "1";
        } else if(row.status =='分支合并'){
          this.applyform.status = "2";
        } else{
          this.applyform.status = "3";
        };
        this.$axios.post("/tool/buildApply",this.applyform).then(Response=>{
          this.applyform.name="",
          this.applyform.item="",
          this.applyform.status="",
            this.$notify({
              message:Response.data,
              duration: 4000
            })
        })
      },
      handleClick2:function (index,row) {
        var url = "http://18.16.200.12:8080/jenkins/job/";
        if(row.status=="分支合并"){
          window.open("http://18.16.200.12:8080/jenkins/view/%E5%90%88%E5%B9%B6%E4%B8%8E%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA/job/git-pull%20and%20merge/")
        }else if(row.status =="后端服务"){
          window.open(url+row.name)
        }else {
          window.open("http://18.16.200.12:8080/jenkins/view/%E5%90%88%E5%B9%B6%E4%B8%8E%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA/job/%E5%89%8D%E7%AB%AFnodejs%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E6%9B%B4%E6%96%B0/")
        }
      }

      },
      created:function () {
        this.flush()
      },
    }

</script>
